<template>
  <div>
    <div id="editorjsa"></div>
    <button @click="save">save</button>
  </div>
</template>

<script>
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import raw from "@editorjs/raw";
import simpleImage from "@editorjs/simple-image";
//import image from "@editorjs/image";
import Checklist from "@editorjs/checklist";
import Embed from "@editorjs/embed";
import quote from "@editorjs/quote";
export default {
  name: "",
  data: () => ({}),
  computed: {},
  watch: {},
  mounted() {
    this.editor = new EditorJS({
      holder: "editorjsa",
      autofocus: true,
      tools: {
        header: {
          class: Header,
          inlineToolbar: ["link"]
        },
        list: List,
        image: simpleImage,
        raw,
        quote,
        checklist: {
          class: Checklist,
          inlineToolbar: true
        },
        embed: {
          class: Embed,
          config: {
            services: {
              youtube: true,
              coub: true
            }
          }
        }
      }
    });
  },
  methods: {
    save() {
      this.editor.save().then((re) => {
        console.log(JSON.stringify(re));
      });
    }
  }
};
</script>

<style scoped></style>
